<template>
  <el-input
    v-model="colorValue"
    clearable
    placeholder="请输入颜色"
    size="default"
    @change="changeColor"
  >
    <template #append>
      <el-color-picker
        v-model="colorValue"
        :predefine="predefineColors"
        show-alpha
        size="small"
        @change="changeColor"
      />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 定义 props
const props = defineProps<{
  modelValue: string
}>()

// 定义 emits
const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void
  (e: 'change', val: string): void
}>()

// 预定义颜色列表
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585'
]

// 本地颜色值
const colorValue = ref<string>(props.modelValue || '')

// 监听 props.modelValue，保持 colorValue 同步
watch(
  () => props.modelValue,
  (val) => {
    colorValue.value = val || ''
  },
  { immediate: true }
)

// 颜色变化时触发
const changeColor = (val: string) => {
  colorValue.value = val || ''
  emit('update:modelValue', colorValue.value)
  emit('change', colorValue.value)
}
</script>

<style scoped lang="scss">
:deep(.el-color-picker--mini),
:deep(.el-color-picker--mini .el-color-picker__trigger) {
  width: 23px;
  height: 23px;
}
</style>
